﻿@model  List<ProductCategoryModel>
@using CAF.WebSite.Application.WebUI
@using CAF.WebSite.Application.WebUI.UI;
@using CAF.Infrastructure.Core;
@using CAF.Mvc.JQuery.Datatables.Core;
@{

ViewBag.Title = T("Admin.ContentManagement.ProductCategory.Manage").Text;
}

<style>
    /*树表格样式*/
.table s.line { margin: 0 6px; display: inline-block; text-decoration: none; color: #ccc; }
.table s.line-lv3 { margin-left: 55px; margin-right: 20px; }
.btn-a a,.btn-a .good-share { cursor: pointer;transition: all linear .2s; padding:0 8px; }
.btn-a a+a{ border-left:1px solid #e6e6e6;}
</style>
<script type="text/javascript">

    $(function () {

        categoryTextEventBind();
        $('#delete-selected').click(function () {
            var ids = [];

            $('table.category_table tbody tr.level-1').each(function () {
                var curRow = $(this);
                if (curRow.find('input[type=checkbox]').prop("checked")) {
                    ids.push(curRow.find('input.hidden_id').val());
                }
            });
            if (ids.length == 0) { toastr['error']('不能批量删除,因为您没有选中任何分类.', ''); return; }
            bootbox.confirm("你确定删除?", function (result) {
                if (result) {
                    var postData = {
                        selectedIds: ids
                    };
                    $.ajax({
                        cache: false,
                        type: "POST",
                        url: "@(Url.Action("DeleteSelected", "ProductCategory"))",
                        data: postData,
                        success: function (data) {
                            if (data.Result) {
                                location.href = "/";
                            } else {

                            }
                        },
                        error: function (e) {
                            toastr['error']('删除失败,请重试.', '');
                        }
                    });
                }
            });
        });

        $('.check-all').click(function () {
            var checkbox = $('.table').find('input[name=checkboxes]');
            if (this.checked) {
                checkbox.each(function () { $(this).attr("checked", true); })
            } else {
                checkbox.each(function () { $(this).attr("checked", false); })
            }
        });

        $('.level-1 .glyphicon').click(function () {
            var p = $(this).parents('.level-1');
            if ($(this).hasClass('glyphicon-plus-sign')) {
                var category = $(this).next('input').val();
                var url = "/ProductCategory/GetCategoryByParentId/";
                ajaxRequestForCategoryTree(this, category, url, 1);
            } else {
                $(this).removeClass('glyphicon-minus-sign').addClass('glyphicon-plus-sign');
                p.nextUntil('.level-1').remove();
            }
        });

        $('.tableContainer').on('click', '.delete-classify', function () {
            var id = $(this).parents('td.td-operate').prev('td').find('.hidden_id').val();
            bootbox.confirm("删除该分类将会同时删除该分类的所有下级分类，您确定要删除吗？", function (result) {
                if (result) {
                    $.ajax({
                        type: 'POST',
                        url: "Delete/"+id,
                        dataType: "json",
                        success: function (data) {
                            if (data.Result == true) {
                                location.href = "List";
                            } else {
                                toastr['error']('删除失败,请重试.', '');
                            }
                        }, error: function () { }
                    });
                }
            });
        });

    });
    function ajaxRequestForCategoryTree(target, category, url, layer) {

        $.ajax({
            type: 'GET',
            url: url + category,
            cache: false,
            dataType: "json",
            success: function (result) {
                var p = $(target).parents('.level-' + layer);
                if (result.total <= 0) { toastr['error']('该分类下目前还没有子分类.', ''); return; }
                for (var i = result.data.length-1; i >= 0; i--) {
                    $(target).addClass('glyphicon-minus-sign').removeClass('glyphicon-plus-sign');
                    var left = layer == 1 ? 5 : (layer - 1) * 50;
                    var pix = result.data[i].Depth === 3 ? '├───' : '└───';
                    var className = "invisible";
                    var sub = ['<tr class="level-' + (layer + 1) + '">',
                        '<td class="td-choose"><input type="checkbox" name="checkboxes"/></td>',
                        '<td><s class="line" style="margin-left:' + left + 'px">' + pix + '</s>'];
                    if (result.data[i].Depth !== 3) {
                        sub.push('<span class="glyphicon glyphicon-plus-sign"></span>');
                    }
                    sub.push('<input class="hidden_id" type="hidden" value="' + result.data[i].Id + '">');
                    sub.push('<input class="text-name" type="text" value="' + result.data[i].Name + '"/>');
                    sub.push('<input class="text-order" type="text" value="' + result.data[i].DisplayOrder + '"/></td>');
                    sub.push('<td class="td-operate">');
                    sub.push('<span class="btn-a">');

                    if (result.data[i].Depth !== 3) {
                        className = "add-classify";
                        sub.push('<a href="Create?parentId=' + result.data[i].Id + '">新增下级</a>');
                    }
                    sub.push('<a href="Edit/' + result.data[i].Id + '">编辑</a><a class="delete-classify">删除</a></span>');
                    sub.push('</td>');
                    sub.push('</tr>');
                    p.after(sub.join(''));
                }

                $('.level-' + (layer + 1) + ' .glyphicon').unbind('click').bind('click', function () {
                    var p = $(this).parents('.level-' + (layer + 1));
                    if ($(this).hasClass('glyphicon-plus-sign')) {
                        var category = $(this).next('input').val();
                        var url = "/ProductCategory/GetCategoryByParentId/";
                        ajaxRequestForCategoryTree(this, category, url, layer + 1);
                    } else {
                        $(this).removeClass('glyphicon-minus-sign').addClass('glyphicon-plus-sign');
                        p.nextUntil('.level-2,.level-1').remove();
                    }

                });


            },
            error: function () {

            }
        });
    };

    function updateOrderOrName(actionName, param) {

        $.ajax({
            type: 'GET',
            url: actionName,
            data: param,
            dataType: "json",
            success: function (data) {
                if (data.Result == true) {
                    toastr['success']('更新分类的' + (actionName == 'UpdateOrder' ? '显示顺序' : '名称') + '成功.', '');
                }
                if ("UpdateOrder" == actionName) {
                    location.reload();
                }
            }, error: function () {

            }
        });
    }

    function categoryTextEventBind() {
        var _order = 0;
        var _name = '';

        $('.tableContainer').on('focus', '.text-order', function () {
            _order = parseInt($(this).val());
        });
        $('.tableContainer').on('focus', '.text-name', function () {
            _name = parseInt($(this).val());
        });

        $('.tableContainer').on('blur', '.text-name,.text-order', function () {
            var id = $(this).parent('td').find('.hidden_id').val();
            if ($(this).hasClass('text-order')) {
                if (isNaN($(this).val()) || parseInt($(this).val()) <= 0) {
                    toastr['error']('您输入的序号不合法,此项只能是大于零的整数.', '更新分类信息');
                    $(this).val(_order);
                } else {
                    if (parseInt($(this).val()) === _order) return;
                    updateOrderOrName("UpdateOrder/" + id, { order: parseInt($(this).val()) });
                }
            } else {
                if ($(this).val().length === 0) {
                    toastr['error']('分类名称不能为空.', '');
                    $(this).val(_name);
                }
                else
                    updateOrderOrName("UpdateName/" + id, { name: $(this).val() });
            }
        });
    }
</script>

<div class="row">
    <div class="col-md-12">
        @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "categorylist-form" }))
        {
            <div class="portlet light">
                <div class="section-header sticky">
                    <div class="caption">
                        <i class="icon-equalizer font-red-sunglo"></i>
                        <span class="caption-subject font-red-sunglo bold uppercase">@T("Admin.ContentManagement.ProductCategory.Manage")</span>
                        <span class="caption-helper"></span>
                    </div>
                    <div class="tools">
                        @*<a href="javascript:;" class="collapse"></a>*@
                    </div>
                    <div class="actions">
                        <a href="@Url.Action("Create")" class="btn yellow"><i class="fa fa-plus"></i>@T("Admin.Common.AddNew") </a>
                        <button type="button" id="delete-selected" class="btn green">
                            <i class="fa fa-trash-o"></i>
                            @T("Admin.Common.Delete.Selected")
                        </button>

                    </div>
                </div>

                <div class="tableContainer portlet-body flip-scroll">
                    <table class="table table-striped table-bordered table-hover dataTable no-footer category_table">
                        <thead>
                            <tr>
                                <th class="td-choose" style="width: 24px;"><input class="check-all" type="checkbox" name="" /></th>
                                <th>分类名称</th>
                                <th class="td-operate">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if (null == Model)
                            {
                                <tr>
                                    <td style="text-align:center;" colspan="3"><h2>没有任何分类</h2></td>
                                </tr>
                            }
                            else
                            {
                                foreach (var category in Model)
                                {
                                    <tr class="level-1">
                                        <td class="td-choose"><input type="checkbox" name="checkboxes" /></td>
                                        <td>
                                            <span class="glyphicon glyphicon-plus-sign"></span><input type="hidden" class="hidden_id" value="@category.Id" /><input class="text-name" type="text" value="@category.Name" />
                                            <input class="text-order" type="text" value="@category.DisplayOrder" />
                                        </td>
                                        <td class="td-operate">
                                            <span class="btn-a">
                                                <a href="Create?parentId=@category.Id">新增下级</a><a href="Edit/@category.Id">编辑</a><a class="delete-classify">删除</a>
                                            </span>
                                        </td>
                                    </tr>
                                }
                            }
                        </tbody>
                    </table>
                </div>
            </div>
        }
    </div>
</div>

